<template>
  <div class="visted-player">
    <h1 class="visted_title">邀请玩家列表</h1>
    <table-view :titles="titles" :dataSource="vistedPlayers" @next="nextClick" @previous="previousClick" :currentPage="currentPage" :maxPage="maxPage"></table-view>
  </div>
</template>
<script>
import TableView from "../../components/common/TableView.vue";
export default {
  data() {
    return {
      currentPage: 1,
      titles: [
        {
          key: "id",
          value: "玩家ID"
        },
        {
          key: "nick",
          value: "玩家名称"
        },
        {
          key: "time",
          value: "邀请时间"
        }
      ],
      vistedPlayers: [],
      maxPage: 1
    };
  },
  components: {
    TableView
  },
  created() {
    this.fetchLists();
  },
  methods: {
    fetchLists() {
      this.apiService.user
        .inviteplayerlist({
          pagesize: 10,
          currentpage: this.currentPage
        })
        .then(res => {
          this.maxPage = Math.ceil(res.data.total / 10);
          this.vistedPlayers = res.data.inviteplayerlist;
          this.vistedPlayers.map(item => {
            item.time = new Date(item.time).toLocaleDateString();
          });
        });
    },
    previousClick() {
      this.currentPage -= 1;
      this.fetchLists();
    },
    nextClick() {
      this.currentPage += 1;
      this.fetchLists();
    }
  }
};
</script>
<style scoped>
.visted-player {
  text-align: center;
}
.visted-player::before {
  content: "";
  display: table;
}
.visted_title {
  color: #0085e7;
  font-size: 0.32rem;
  padding: 0.3rem 0;
}
</style>

